<template>
    <transition name="bottomto">
      <div class="share" v-if="mshow">
        <div class="header">
          <a @click="close">
            <i class="fa fa-times" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    </transition>
</template>

<script>
export default {
  data () {
    return {
      mshow: this.isShow
    }
  },
  props: ['isShow'],
  methods: {
    back () {
      this.$router.back()
    },
    close () {
      this.mshow = !this.mshow
      this.$emit('on-share-view', this.mshow)
    }
  },
  watch: {
    isShow () {
      this.mshow = this.isShow
    }
  }
}
</script>

<style scoped>

.bottomto-enter-active {
    transform: translateY(0)
}

.bottomto-enter, 
.bottomto-leave-active {
  transform: translateY(100%)
}

.header{
  height: 100px;
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  font-size: 30px;
}
.share{
    position: fixed;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom left, #66d0a3 , #6aa6b1);
    z-index: 100000;
    transition: all 0.3s;
}
</style>
